<%--
  Created by IntelliJ IDEA.
  User: John Cage
  Date: 2020/11/14
  Time: 9:30
  To change this template use File | Settings | File Templates.
--%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
    <link rel="StyleSheet" href="../css/product.css" type="text/css" media="screen"/>

    <script>
        function viewItem(itemObj)
        {
            var item = 'itemId=' + itemObj.getAttribute('itemId');
            $('#displayBlock').css({'left': '25%', 'width': '50%'});
            $.get('viewItem', item, (data)=>
            {
                $('#displayBlock').html(data);
            });
        }
    </script>

    <div class="displayItem">
        <div id="separator">${sessionScope.product.name}</div>

        <c:forEach var="item" items="${sessionScope.itemList}">
            <div class="item">
                <div class="pictureHide">
                    <div class="itemPicture" style="background-image: url('../images/${sessionScope.product.categoryId}item.png')" itemId="${item.itemId}" onclick="viewItem(this)"></div>
                </div>
                <div class="contentBox">
                    <div class="title">${sessionScope.product.name}</div>
                    <div class="subTitle">${item.product.productId}</div>
                    <div class="explain">
                            ${item.attribute1}
                            ${item.attribute2}
                            ${item.attribute3}
                            ${item.attribute4}
                            ${item.attribute5}
                    </div>
                    <div class="price"><fmt:formatNumber value="${item.listPrice}" pattern="$#,##0.00" /></div>
                    <div class="addToCart" onclick="window.open('addItemToCart?workingItemId=${item.itemId}', '_self')">Add to Cart</div>
                </div>
            </div>
        </c:forEach>
    </div>